<template>
  <div class="body">
    <div class="container">
      <!-- 导航栏 -->
      <div class="nav-Bot">
        <div class="title">
          <span>发现 AI Bot</span>
        </div>
        <div class="search">
          <Search></Search>
        </div>
        <div class="buttons">
          <button class="collect">查看 BOT 收藏</button>
          <button class="create">创建 BOT</button>
        </div>
      </div>
      <!-- 工具栏 -->
      <div class="tools">
        <div class="tools-in">
          <div class="header">
            <img src="../assets/img/hot.png" alt="热门" />
            "实用AI工具合集"
          </div>
          <div class="content">
            <a href="#" v-for="data in dataList" :key="data.title">
              <div class="tool-infos">
                <div class="tool-t">
                  <img :src="getAssetsFile(data.imgURL as string)" alt="" />
                  <div class="bot-detail">
                    <div class="bot-title">{{ data.title }}</div>
                    <div class="bot-desc">
                      {{ data.desc }}
                    </div>
                  </div>
                </div>
                <div class="tool-b">
                  <div class="bot-icon">
                    <img src="../assets/img/hot.svg" alt="" />
                    <span>{{ data.span1 }}</span>
                    <img src="../assets/img/star.svg" alt="" />
                    <span>{{ data.span2 }}</span>
                  </div>
                  <div class="bot-act">开始互动</div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
      <!-- 服务栏 -->
      <div class="tabs-header">
        <div class="tabs-title" v-for="title in tabsTitle" :key="title">{{ title }}</div>
      </div>
      <!-- 用户互动 -->
      <div class="user-act">
        <div class="content">
          <a href="#" v-for="data in dataActList" :key="data.title">
            <div class="tool-infos">
              <div class="tool-t">
                <img :src="getAssetsFile(data.imgURL as string)" alt="brain-image" class="img" />
                <div class="bot-detail">
                  <div class="bot-title">{{ data.title }}</div>
                  <div class="bot-userInfo">
                    <img :src="getAssetsFile(data.avatorImg as string)" alt="" class="avator" />
                    <span class="name">{{ data.avatorName }}</span>
                  </div>
                  <div class="bot-desc">
                    {{ data.desc }}
                  </div>
                </div>
              </div>
              <div class="tool-b">
                <div class="bot-icon">
                  <img src="../assets/img/hot.svg" alt="" />
                  <span>{{ data.span1 }}</span>
                  <img src="../assets/img/star.svg" alt="" />
                  <span>{{ data.span2 }}</span>
                </div>
                <div class="bot-act">开始互动</div>
              </div>                                                                                                               
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from '../util/utils'
import Search from '@/components/search.vue'
import { ref } from 'vue'
interface IDataList {
  imgURL: string
  title: string
  desc: string
  span1: string
  span2: string
}

const dataList: IDataList[] = [
  {
    imgURL: 'act1.png',
    title: 'AI全能小助手',
    desc: 'AI全能小助手，擅长写代码、面试指导、在线搜书、文生图、创作故事、讲笑话、作诗、取名、查天气、优化简历、扮演程序员鼓励师，识别图片内容并总结，本地文件或网站内容总结，通过标题生成PPT，读书总结成思维导图，上知天文下知地理。擅长智能聊天回答，可处理多达万字的长篇内容，具备分析图像的能力，且有一定的「幽默感」，生成网页，超强推理能力，可以实时获取网络信息 ，具有超强的信息处理能力。✅采用豆包·Function call模型。',
    span1: '3.3k',
    span2: '51',
  },
  {
    imgURL: 'act2.png',
    title: '前端面试官',
    desc: '一个资深前端面试官,助力你找到心仪工作 ，具有超强的信息处理能力。✅采用豆包·Function call模型。',
    span1: '3.1k',
    span2: '173',
  },
  {
    imgURL: 'act3.png',
    title: '思维模型专家',
    desc: '每个思维模型背后，都包含了各行业专家和咨询公司深入的研究和总结，并经历了多年实践和优化逐步成型。使用思维模型来回答问题，不仅授人以鱼，更能授人以渔，而且非常便于记忆和实操。 ，具有超强的信息处理能力。✅采用豆包·Function call模型。',
    span1: '264',
    span2: '18',
  },
  {
    imgURL: 'act4.png',
    title: '程序员的工具箱',
    desc: '程序员的工具箱。功能集成json格式化，json转sql，json转golang，域名DNS记录查询，搜索引擎，600+linux命令，网页内容总结，OCR识别等工具。目标是一个工具解决程序员日常工作中使用到的工具网站。 ，具有超强的信息处理能力。✅采用豆包·Function call模型。',
    span1: '594',
    span2: '38',
  },
]

const tabsTitle: Array<string> = [
  '推荐',
  '效率工具',
  ' 商业服务',
  '文本创作',
  '学习教育',
  '代码助手',
  '生活方式',
  '游戏',
  '图像与音视频角色',
]

interface IDataActList {
  imgURL: string
  title: string
  desc: string
  span1: string
  span2: string
  avatorName: string
  avatorImg: string
}

const dataActList: IDataActList[] = [
  {
    imgURL: 'acts1.png',
    title: 'Chat GPT4.5',
    desc: '1,可处理多达4万字的长篇内容 2,具备分析图像的能力，且有一定的「幽默感」 3,生成网页 4,超强推理能力 5,可以实时获取网络信息 6，具有超强的信息处理能力',
    span1: '19k',
    span2: '318',
    avatorName: '用户74140114885',
    avatorImg: 'avator1.png',
  },
  {
    imgURL: 'acts2.png',
    title: 'AI全能小助手',
    desc: 'AI全能小助手，擅长写代码、面试指导、在线搜书、文生图、创作故事、讲笑话、作诗、取名、查天气、优化简历、扮演程序员鼓励师，识别图片内容并总结，本地文件或网站内容总结， 通过标题生成 PPT，读书总结成思维导图，上知天文下知地理。擅长智能聊天回答，可处理多达万字的长篇内容，具备分析图像的能力，且有一定的「幽默感」，生成网页 ，超强推理能力，可以实时获取网络信息 ，具有超强的信息处理能力。✅ 采用豆包·Function call模型。',
    span1: '3.4k',
    span2: '51',
    avatorName: '小小神仙',
    avatorImg: 'avator2.png',
  },
  {
    imgURL: 'acts3.png',
    title: 'AI编程助手',
    desc: '采用最智能的大模型，自动化AI编程。精通Java、C、C++、Python、Rust、Go等编程语言有很深的造诣，能够回答各种复杂的与编程相关的问题。',
    span1: '2.5k',
    span2: '66',
    avatorName: 'RealDragon',
    avatorImg: 'avator3.png',
  },
  {
    imgURL: 'acts4.png',
    title: '逃离缅甸',
    desc: '缅甸以电信诈骗而闻名，你必须谨慎行事，才能逃离，加油吧，骚年',
    span1: '5.0k',
    span2: '62',
    avatorName: '哥你喝过煮酒吗',
    avatorImg: 'avator4.png',
  },
  {
    imgURL: 'acts5.png',
    title: '都市群芳录',
    desc: '一款文字游戏男主人公因为发现公司高层的不正当交易，被公司开除又三位女主发生着怎样的故事？',
    span1: '1.9k',
    span2: '54',
    avatorName: '散修张一介',
    avatorImg: 'avator5.png',
  },
  {
    imgURL: 'acts6.png',
    title: 'QQ号估值',
    desc: '对QQ号价值做模糊的估计',
    span1: '7.7k',
    span2: '8',
    avatorName: '李帆本尊',
    avatorImg: 'avator6.png',
  },
  {
    imgURL: 'acts7.png',
    title: '单人剧本杀-鬼魅酒店👻',
    desc: '被困在诡异酒店，每个角落都藏着线索与危机。智斗幽灵，寻找逃生之钥。你能否突破重重迷雾，揭开秘密，逃离这场超自然的生死游戏？',
    span1: '2.0k',
    span2: '83',
    avatorName: 'totoroll',
    avatorImg: 'avator7.png',
  },
  {
    imgURL: 'acts8.png',
    title: '变量命名助手',
    desc: '变量命名助手：输入中文自动转成合适的变量名',
    span1: '782',
    span2: '52',
    avatorName: '少年酱105974',
    avatorImg: 'avator8.png',
  },
  {
    imgURL: 'acts9.png',
    title: 'MBTI性格测试',
    desc: '他是 MBTI 性格测试专家。他非常了解 MBTI 测试的原理和方法，可以通过一系列问题来测试出对方的 MBTI 类型，并根据测试结果给出相应的建议和解释。他对 MBTI 测试的结果非常准确，他的建议也非常有用，可以帮助人们更好地了解自己和他人。如果你需要进行 MBTI 测试，请告诉他，他会尽力帮助你。',
    span1: '2.9k',
    span2: '12',
    avatorName: 'user8541043917278',
    avatorImg: 'avator9.png',
  },
  {
    imgURL: 'acts10.png',
    title: '脑筋急转弯脑筋急转弯',
    desc: '我是小机灵鬼，我可以问你很多脑筋急转弯',
    span1: '1.8k',
    span2: '5',
    avatorName: 'user9073381850574',
    avatorImg: 'avator10.png',
  },
  {
    imgURL: 'acts11.png',
    title: '前端面试官',
    desc: '一个资深前端面试官,助力你找到心仪工作',
    span1: '3.1k',
    span2: '174',
    avatorName: '东方小月',
    avatorImg: 'avator11.png',
  },
  {
    imgURL: 'acts12.png',
    title: '旅行规划师',
    desc: '可以为你提供旅行目的地、行程安排和预算规划等方面的建议和帮助',
    span1: '928',
    span2: '19',
    avatorName: 'ljm993510',
    avatorImg: 'avator12.png',
  },
]
</script>

<style lang="scss" scoped>
/* body部分 */
.body {
  width: 100%;
  height: 100%;
  background-color: #e2ecf5;

  .container {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 1200px;
    margin: 0 auto;

    // 导航条
    .nav-Bot {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0 30px;
      width: 100%;

      .title {
        span {
          flex-shrink: 0;
          color: #1e80ff;
          font-size: 34px;
          font-style: normal;
          font-weight: 800;
          line-height: 28px;
        }
      }

      .buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 225px;
        height: 36px;

        .collect {
          width: 125px;
          font-size: 13px;
          color: #1e80ff;
          border: 1px solid rgba(30, 128, 255, 0.3);
          border-radius: 4px;
          margin-right: 8px;
          padding: 3px 16px;
          background-color: #fff;
        }

        .create {
          width: 82px;
          font-size: 11px;
          color: #fff;
          border-radius: 2px;
          border: none;
          outline: none;
          background-color: #007fff;
          transition:
            background-color 0.3s,
            color 0.3s;
          cursor: pointer;
        }
      }
    }

    // 工具栏
    .tools {
      width: 1170px;
      height: 227px;

      .tools-in {
        margin: 16px 0;
        padding: 0 20px 20px;
        background-color: #fff;

        .header {
          padding: 12px 0;
          color: #252933;
          font-size: 16px;
          line-height: 24px;

          img {
            width: 55px;
            vertical-align: bottom;
            background: linear-gradient(90deg, #fef3ff, #f2fcff 74.76%, rgba(252, 247, 255, 0.598));
            margin-right: 4px;
            border-radius: 4px;
          }
        }

        .content {
          display: grid;
          grid-gap: 8px;
          grid-template-columns: repeat(4, 1fr);
          width: 100%;

          a {
            text-decoration: none;

            .tool-infos {
              box-sizing: border-box;
              height: 160px;
              border-radius: 4px;
              padding: 16px;
              border: 1px solid #eaedf1;
              background-size: cover;
              background-repeat: no-repeat;
              background-image: url('../assets/img/bgc-card.png');

              .tool-t {
                display: flex;
                justify-content: space-between;

                img {
                  width: 48px;
                  height: 48px;
                  border-radius: 4px;
                  margin: 0 0 8px;
                }

                .bot-detail {
                  margin-left: 10px;
                  height: 86px;
                  .bot-title {
                    color: #0c0d0e;
                    font-size: 14px;
                    font-weight: 500;
                  }
                  .bot-desc {
                    display: -webkit-box;
                    overflow: hidden;
                    white-space: normal;
                    text-overflow: ellipsis;
                    word-wrap: break-word;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    color: #42464e;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 20px;
                  }
                }
              }

              .tool-b {
                display: flex;
                justify-content: space-between;
                padding-top: 12px;
                border-top: 1px solid #eaedf1;

                .bot-icon {
                  img {
                    margin-right: 4px;
                  }
                  span {
                    color: #8a919f;
                    line-height: 20px;
                    margin-right: 12px;
                    font-size: 12px;
                  }
                }

                .bot-act {
                  box-sizing: border-box;
                  width: 80px;
                  height: 27px;
                  font-size: 12px;
                  background-color: #007fff;
                  color: #fff;
                  text-align: center;
                  line-height: 27px;
                  border-radius: 4px;
                  border: none;
                  outline: none;
                  cursor: pointer;
                  transition:
                    background-color 0.3s,
                    color 0.3s;

                  &:hover {
                    background-color: #0371df;
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }
    }

    // 服务栏
    .tabs-header {
      box-sizing: border-box;
      width: 1170px;
      height: 68px;
      padding: 12px 0;
      display: flex;
      justify-content: start;
      margin-top: 40px;

      .tabs-title {
        padding: 12px 20px;
        margin-right: 8px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow:
          0 15px 35px -2px rgba(0, 0, 0, 0.05),
          0 5px 15px 0 rgba(0, 0, 0, 0.05);
        white-space: nowrap;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;

        &:active {
          color: #1e80ff;
        }
      }
    }

    // 用户互动
    .user-act {
      width: 1186px;
      height: 877px;
      .content {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;

        a {
          text-decoration: none;

          .tool-infos {
            box-sizing: border-box;
            height: 203px;
            border-radius: 4px;
            padding: 16px;
            border: 1px solid #eaedf1;
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #fff;

            .tool-t {
              display: flex;
              justify-content: space-between;

              .img {
                width: 60px;
                height: 60px;
                border-radius: 4px;
                margin: 0 0 8px;
              }

              .bot-detail {
                width: 273px;
                margin-left: 10px;
                height: 136px;
                .bot-title {
                  color: #252933;
                  font-size: 18px;
                  font-weight: 500;
                  margin-bottom: 8px;
                }

                .bot-userInfo {
                  margin-bottom: 8px;
                  .avator {
                    vertical-align: middle;
                    width: 16px;
                    height: 16px;
                    line-height: 16px;
                    border-radius: 50%;
                    margin-right: 5px;
                    margin-bottom: 0;
                  }
                  span {
                    color: #8a919f;
                    font-size: 13px;
                  }
                }
                .bot-desc {
                  display: -webkit-box;
                  overflow: hidden;
                  white-space: normal;
                  text-overflow: ellipsis;
                  word-wrap: break-word;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  color: #515767;
                  font-size: 13px;
                  font-weight: 400;
                }
              }
            }

            .tool-b {
              display: flex;
              justify-content: space-between;
              padding-top: 12px;
              border-top: 1px solid #eaedf1;

              .bot-icon {
                img {
                  margin-right: 4px;
                }
                span {
                  color: #8a919f;
                  line-height: 20px;
                  margin-right: 12px;
                  font-size: 12px;
                }
              }

              .bot-act {
                box-sizing: border-box;
                width: 80px;
                height: 27px;
                font-size: 12px;
                background-color: #007fff;
                color: #fff;
                text-align: center;
                line-height: 27px;
                border-radius: 4px;
                border: none;
                outline: none;
                cursor: pointer;
                transition:background-color 0.3s,color 0.3s;

                &:hover {
                  background-color: #0371df;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
